<template>
  <transition name="vbestui-toast">
    <div class="vbestui-toast-group" v-show="isShow">
          <div class="vbestui-toast-message">
      <i :class="[`vbestui-iconfont icon-${dType}-m`,`vbestui-toast-icon-${dType}-m`]"></i>
      <span>{{dContent}}</span>
    </div>
    </div>
  </transition>
</template>
<script>
import { oneOf } from "utils/index.js";
export default {
  name: "BToast",
  props: {
    type: {
      validator(value) {
        return oneOf(value, ["info", "success", "warning", "error"]);
      },
      default: "info",
    },
    content: {
      type: String,
      default: "",
    },
    duration: {
      type: [Number, String],
      default: 1.5,
    },
  },
  data() {
    return {
      isShow: false,
      dType: null,
      dContent: null,
      dDuration: null,
    };
  },
  methods: {
    /**暴露的方法 */
    show() {
      this.setData();
      this.isShow = true;
      setTimeout(() => {
        this.isShow = false;
      }, this.dDuration * 1000);
    },
    info(content, duration) {
      this.dType = "info";
      this.isTypeShow(content, duration);
    },
    success(content, duration) {
      this.dType = "success";
      this.isTypeShow(content, duration);
    },
    warning(content, duration) {
      this.dType = "warning";
      this.isTypeShow(content, duration);
    },
    error(content, duration) {
      this.dType = "error";
      this.isTypeShow(content, duration);
    },
    /**内部方法 */
    isTypeShow(content, duration = this.duration) {
      this.dContent = content;
      this.dDuration = duration;
      this.isShow = true;
      setTimeout(() => {
        this.isShow = false;
      }, this.dDuration * 1000);
    },
    setData() {
      this.dType = this.type;
      this.dContent = this.content;
      this.dDuration = this.duration;
    },
  },
};
</script>